<template>
  <el-row class="ms">
    <el-col :span="24">
      <h1 class="tith" id="tith" ref="tith">AI监控中心看板</h1>

      <el-row>
        <el-col :span="1">
          <div class="pwp">
            <p class="point"></p>
            <p class="point"></p>
            <p class="point"></p>
            <p class="point"></p>
            <p class="point"></p>
            <p class="point"></p>
            <p class="point"></p>
          </div>
          <div class="rctwp">
            <p class="rct"></p>
            <p class="rct"></p>
            <p class="rct"></p>
            <p class="rct"></p>
            <p class="rct"></p>
            <p class="rct"></p>
            <p class="rct"></p>
            <p class="rct"></p>
          </div>

          <div class="nullwp"></div>
          &nbsp;
        </el-col>
        <el-col :span="22">
          <el-row class="mwp">
            <el-col :span="8">
              <div class="maps" ref="maps">
                <div class="inmap">
                  <h2 class="tith2">预警热感图</h2>
                  <div class="selwp">
                    <div
                      @click="selTab(0)"
                      :class="'i ' + (mapFlg === 0 ? 'ac' : '')"
                    >
                      7日
                    </div>
                    <div
                      @click="selTab(1)"
                      :class="'i ' + (mapFlg === 1 ? 'ac' : '')"
                    >
                      30日
                    </div>
                  </div>
                  <div class="cvs" ref="cvs"></div>
                </div>
              </div>
            </el-col>

            <el-col :span="16" style="display:flex;flex-direction: column;">
              <div class="mdata">
                <div class="hd">
                  <p>区域</p>
                  <p>公司</p>
                  <p>技术员</p>
                  <p>养户</p>
                  <p>规模</p>
                  <p class="sp">预警时间</p>
                  <p>预警等级</p>
                  <p>异常头数</p>
                  <p>异常人数</p>
                  <p>状态</p>
                  <p>反馈结果</p>
                </div>
                <div v-if="maData.length" class="acrow"></div>
                <Scroll
                  :class-option="optionSetting"
                  :data="maData"
                  class="seamless-warp"
                  ref="seamless-warp"
                >
                  <div
                    :key="item.id"
                    class="mq"
                    v-for="item in maData"
                    @click="selD(item.id)"
                  >
                    <p v-text="item.area"></p>
                    <p v-text="item.cpy"></p>
                    <p v-text="item.user"></p>
                    <p v-text="item.yh"></p>
                    <p v-text="item.gm"></p>
                    <p class="sp" v-text="item.wrn"></p>
                    <p v-text="item.j" :style="'color:' + item.c"></p>
                    <p v-text="item.wpuser"></p>
                    <p v-text="item.wuser"></p>
                    <p v-text="item.status"></p>
                    <p v-text="item.res"></p>
                  </div>
                </Scroll>
              </div>
              <div class="videowp">
                <div class="in" style="margin-right:10px;">
                  <h2 class="tith3">调取视频</h2>
                  <video :poster="videoDf" class="vd"></video>
                </div>
                <div class="in">
                  <h2 class="tith3">图像抓拍</h2>
                  <video :poster="videoDf" class="vd"></video>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="1">
          <el-col :span="24">
            <div class="pwp r">
              <p class="point"></p>
              <p class="point"></p>
              <p class="point"></p>
              <p class="point"></p>
              <p class="point"></p>
              <p class="point"></p>
              <p class="point"></p>
            </div>
            <div class="rctwp r">
              <p class="rct"></p>
              <p class="rct"></p>
              <p class="rct"></p>
              <p class="rct"></p>
              <p class="rct"></p>
              <p class="rct"></p>
              <p class="rct"></p>
              <p class="rct"></p>
            </div>

            <div class="nullwp r"></div>
            &nbsp;
          </el-col>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>
<style lang="less" scoped>
.videowp {
  flex: 1;
  display: flex;
  padding: 0 0 35px 10px;
  .in {
    flex: 1;
    border: 1px solid #187781;
    border-radius: 5px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    .tith3 {
      margin: 0 0 20px 0;
      padding: 0;
      font-size: 24px;
      color: #fff;
      background: #0a3849;
      line-height: 44px;
      text-align: center;
    }
    .vd {
      width: 100%;
      flex: 1;
    }
  }
}
.mdata {
  position: relative;
  margin-left: 10px;
  border: 1px solid #1a6e6c;
  padding: 10px;
  border-radius: 5px;
  color: #ffffff;
  margin-bottom: 20px;
  .hd {
    display: flex;
    p {
      width: 8%;
      margin: 0;
      padding: 0;
      font-size: 18px;
      background: #0a3849;
      color: #54f5d9;
      line-height: 28px;
      text-align: center;
    }
  }
}
.ms {
  background: url("../../assets/image/bj.jpg") no-repeat;
  background-size: 100%;
  background-color: #020918;
}
.mwp {
  display: flex;
  align-items: stretch;
}
.tith {
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 40px;
  padding: 20px 0;
  border-bottom: 2px solid #0a3849;
  margin-bottom: 20px;
  color: #ffffff;
}
.maps {
  padding-bottom: 35px;
}
.inmap {
  width: 100%;
  height: 100%;
  border: 1px solid #1ffff7;
  border-radius: 5px;
  position: relative;
  .selwp {
    display: flex;
    position: absolute;
    top: 10px;
    right: 0;
    z-index:999;
    .i {
      min-width: 80px;
      text-align: center;
      color: #fff;
      padding: 5px 20px;
      background: #0a3849;
      border-radius: 10px;
      margin-right: 10px;
      &.ac {
        background: #1ffff7;
      }
    }
  }
}
.pwp {
  position: absolute;
  left: 20px;
  top: 10px;
  &.r {
    left: auto;
    right: 20px;
    top: 75%;
  }
}
.point {
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: #1ffff7;
}
.rctwp {
  &.r {
    left: auto;
    right: 10px;
    top: 30%;
  }
  position: absolute;
  left: 10px;
  top: 40%;
}
.rct {
  width: 40px;
  height: 5px;
  background: #1ffff7;
  transform: skewX(-45deg) rotate(30deg);
}
.nullwp {
  &.r {
    left: auto;
    right: 10px;
    top: 10%;
  }
  position: absolute;
  top: 90%;
  width: 20px;
  height: 20px;
  left: 10px;
  border: 3px solid #1ffff7;
  border-radius: 10px;
}
.tith2 {
  font-size: 20px;
  color: #ffffff;
  border-bottom: 2px solid #1ffff7;
  margin: 10px 10px 0 10px;
  line-height: 28px;
  display: inline-block;
  padding-right: 20px;
}

.cvs {
  padding-top: 48px;
  margin-top: -38px;
  width: 100%;
  height: 100%;
}
.seamless-warp {
  flex: 1;
  height: 229px;
  overflow: hidden;
  // &:hover{
  //   overflow-y: scroll;
  // }
}
.mq {
  display: flex;
  p {
    width: 8%;
    margin: 0;
    padding: 0;
    font-size: 18px;
    line-height: 28px;
    text-align: center;
  }
}
.sp {
  width: 20% !important;
}
.acrow {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 38px;
  background: #1ffff7;
  height: 28px;
}
</style>
<script>
import df from '@/assets/image/df.jpg';

import echarts from "echarts";
require("echarts/extension/bmap/bmap");
require("echarts/lib/chart/heatmap");
import Scroll from "vue-seamless-scroll";
import request from "@/utils/request";
let Timer = null;
export default {
  computed: {
    optionSetting() {
      return {
        step: 1,
        limitMoveNum: 5,
        singleHeight: 28,
        waitTime: 5000,
      };
    }
  },
  data() {
    return {
      videoDf : '',
      maData: [],
      mapFlg: 0,
      listData: [
        {
          id: "123",
          area: "南区",
          cpy: "运城",
          user: "崔",
          yh: "崔传世",
          gm: "1200",
          wrn: "2019-12-12-10:20",
          j: "一级",
          c: "#f00",
          wpuser: "3",
          wuser: "3",
          status: "未处理",
          res: "正常卖主"
        },
        {
          id: "123",
          area: "南区",
          cpy: "运城",
          user: "崔",
          yh: "崔传世",
          gm: "1200",
          wrn: "2019-12-12-10:20",
          j: "一级",
          c: "#f00",
          wpuser: "3",
          wuser: "3",
          status: "未处理",
          res: "正常卖主"
        },
        {
          id: "123",
          area: "南区",
          cpy: "运城",
          user: "崔",
          yh: "崔传世",
          gm: "1200",
          wrn: "2019-12-12-10:20",
          j: "一级",
          c: "#f00",
          wpuser: "3",
          wuser: "3",
          status: "未处理",
          res: "正常卖主"
        },
        {
          id: "123",
          area: "南区",
          cpy: "运城",
          user: "崔",
          yh: "崔传世",
          gm: "1200",
          wrn: "2019-12-12-10:20",
          j: "一级",
          c: "#f00",
          wpuser: "3",
          wuser: "3",
          status: "未处理",
          res: "正常卖主"
        },
        {
          id: "123",
          area: "南区",
          cpy: "运城",
          user: "崔",
          yh: "崔传世",
          gm: "1200",
          wrn: "2019-12-12-10:20",
          j: "一级",
          c: "#f00",
          wpuser: "3",
          wuser: "3",
          status: "未处理",
          res: "正常卖主"
        },
        {
          id: "123",
          area: "南区",
          cpy: "运城",
          user: "崔",
          yh: "崔传世",
          gm: "1200",
          wrn: "2019-12-12-10:20",
          j: "一级",
          c: "#f00",
          wpuser: "3",
          wuser: "3",
          status: "未处理",
          res: "正常卖主"
        },
        {
          id: "123",
          area: "南区",
          cpy: "运城",
          user: "崔",
          yh: "崔传世",
          gm: "1200",
          wrn: "2019-12-12-10:20",
          j: "一级",
          c: "#000",
          wpuser: "3",
          wuser: "3",
          status: "未处理",
          res: "正常卖主"
        },
        {
          id: "123",
          area: "南区",
          cpy: "运城",
          user: "崔",
          yh: "崔传世",
          gm: "1200",
          wrn: "2019-12-12-10:20",
          j: "一级",
          c: "#fff",
          wpuser: "3",
          wuser: "3",
          status: "未处理",
          res: "正常卖主"
        }
      ]
    };
  },
  components: {
    Scroll
  },
  methods: {
    selD(id) {
      console.log(id);
    },
    selTab(flg = 0) {
      // interface 获取地图
      console.log(flg);
      this.mapFlg = flg;
      this.initMap();
    },
    initMap() {
      this.$el = echarts.init(this.$refs.cvs);
      var myChart = this.$el;
      var option = {};
      //console.log(BMap, echarts, this.$el);

      request({
        url: "/aiboard/warn/selectWarnThermalFigure",
        method: "post",
        params: {mapFlg: this.mapFlg}
      }).then((res)=>{

      // 假数据
      const jsj = res.data;

      const { geoJson, area, items } = jsj;

      myChart.hideLoading();

      echarts.registerMap("SX", geoJson);

      myChart.setOption(
        (option = {
          tooltip: {
            trigger: "item",
            formatter: "{b}<br/>{c}"
          },
          toolbox: {
            show: false,
            orient: "vertical",
            left: "right",
            top: "center",
            feature: {
              dataView: { readOnly: false },
              restore: {},
              saveAsImage: {}
            }
          },
          visualMap: {
            textStyle: {
              color: "#fff",
              fontSize: 14
            },
            min: area[0],
            max: area[1],
            text: ["高", "低"],
            realtime: false,
            calculable: true,
            inRange: {
              color: ["lightskyblue", "yellow", "orangered"]
            }
          },
          series: [
            {
              name: "",
              type: "map",
              mapType: "SX", // 自定义扩展图表类型
              label: {
                show: true
              },
              data: items
            }
          ]
        })
      );

      });
    },
    setMH() {
      clearTimeout(Timer);
      Timer = setTimeout(() => {
        const WH = (document.documentElement || document.body).offsetHeight,
          TH = this.$refs.tith.offsetHeight;

        this.$refs.maps.style.height = WH - TH - 20 + "px";
        try {
          this.$el.resize();
        } catch (e) {}
      }, 300);
    }
  },
  mounted() {

    // 获取滚轮
    // const Obj = this.$refs['seamless-warp'].$el;
    // Obj.onmouseleave = function(e){
    //   // console.log(window.xPos);
    //   Obj.scrollTop = 0;
    // }
    
    this.videoDf = df;
    //console.log(this.videoDf,'@@@')

    request({
      url: "/aiboard/warn/selectAiWarnListByUserId",
      method: "post"
    }).then(res => {
      //console.log(res.data);
      this.maData = res.data;
    });

    this.setMH();

    // 初始化地图
    setTimeout(() => {
      this.initMap();
    }, 400);

    // 跑定时任务5分钟刷新一次
    setTimeout(() => {
      window.location.reload(true);
    }, 1000 * 60 * 10);

    window.addEventListener("resize", this.setMH);
  },
  destroyed() {
    window.removeEventListener("resize", this.setMH);
  }
};
</script>
